<template>
  <div>
    <van-nav-bar title="用户注册" />
    <!-- 封装 form 表单 -->
    <UserForm :user="user" @submint="onSubmit">
      <template #operation>
        <van-button block type="primary" native-type="submit">注册</van-button>
      </template>
      <template #link>
        <router-link to="/login">有账号，去登录</router-link>
      </template>
    </UserForm>
  </div>
</template>

<script>
import UserForm from "../components/UserForm.vue";

import { register } from "../api/user";
export default {
  components: { UserForm },

  data() {
    return {
      user: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    async onSubmit() {
      // 调用注册接口
      const res = await register(this.user);
      console.log("res  ----->  ", res);
      // 提示用户注册成功
      this.$toast.success("注册成功");
      // 注册成功后，跳转到登录页
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="less">
.nav-container {
  text-align: right;
  margin-top: 10px;
  font-size: 13px;
}
</style>
